<template>
  <div class="app">
    <h2>我是App组件</h2>
    <h2>学校名称（原始）：{{str}}</h2>
    <h2>学校名称（大写）：{{str.toUpperCase()}}</h2>
    <h2>学校名称（大写）：{{str2}}</h2>
    <h2>学校名称（大写）：{{getBigStr()}}</h2>
    <h2 v-big-char="str">学校名称（大写）：</h2>
    <h2>学校名称（大写）：{{str | upper}}</h2>
    <h2>学校名称（截取）：{{str | cut(3)}}</h2>
    <h2>学校名称（大写+截取）：{{str | upper | cut(3)}}</h2>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child'

  export default {
    name:'App',
    components:{Child},
    data() {
      return {
        str:'atguigu',
      }
    },
    methods: {
      getBigStr(){
        return this.str.toUpperCase()
      }
    },
    computed:{
      str2(){
        return this.str.toUpperCase()
      }
    },
    directives:{
      'big-char'(element,{value}){
        element.innerText += value.toUpperCase()
      }
    },
    filters:{
      /* 
        1.upper何时调用？—— 当有人使用该过滤器的时候
        2.upper中的this是谁？—— 爱谁谁，总之不是我们想用的vm或vc
        3.upper收到什么参数？—— 过滤器前方的表达式执行的结果
        4.upper需不需要写返回值？—— 需要，返回值会呈现在页面上
      */
      upper(value){
        console.log('@',value)
        return value.toUpperCase()
      },
    }
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
  }
</style>